<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<!--<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />-->
		<link rel="stylesheet" href="css/mui.picker.min.css">
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">关键字</h1>
			<a id="btnAdd" class="mui-icon mui-icon-plusempty mui-pull-right"></a>
		</header>
		<div class="mui-content" id="form1">
			<form class="mui-input-group" style="margin-top: 10px;">
				<div class="mui-input-row" v-for="item in keywords">
					<div class="mui-navigate-right" @tap="selectkeyword(item)" @longtap="deletekeyword(item)">
						<input type="text" v-model="item" id="txtKeywod" readonly="readonly" class="mui-input-clear mui-input" placeholder="搜索关键字" />
					</div>
				</div>
			</form>
		</div>
	</body>
	<script src="js/mui.min.js "></script>
	<script src="js/mui.picker.min.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/shiquan.site.js"></script>
	<script src="js/shiquan.app.js"></script>
	<script>
		var vue = new Vue({
			el: '#form1',
			data: {
				keywords: [] //列表信息流数据
			}
		});
		mui.init({
			swipeBack:true, //启用右滑关闭功能
			gestureConfig:{
	            tap: true, //默认为true
	            doubletap: true, //默认为false
	            longtap: true, //默认为false
	            swipe: true, //默认为true
	            drag: true, //默认为true
	            hold:true,//默认为false，不监听
	            release:false//默认为false，不监听
	        }
		});
		
		mui.plusReady(function(){
			vue.keywords = app.getKeywords();
			/*保存*/
			var btnAdd = document.getElementById('btnAdd');
			btnAdd.addEventListener('tap', function(event) {
				event.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				plus.nativeUI.prompt('请输入搜索关键字：', function(e) {
					if (e.index == 1) {
						let keyword = e.value;
						vue.keywords.forEach(function(index,item){
							console.log("index="+index + " item="+item);
							if(item == keyword)
								vue.keywords.splice(index,1);
						});
						vue.keywords.push(keyword);
						app.setKeywords(vue.keywords);
						mui.toast("数据保存成功！");
					} else {
						mui.toast('你点了取消按钮!');
					}
				}, '实全资讯',"", btnArray);
			}, false);
		});
		
		function selectkeyword(item){
			/*2018-08-17 侯连文 调用上级页更新*/
			var opener = plus.webview.currentWebview().opener()
			mui.fire(opener,'selectedkeyword',{item:item});
			plus.webview.currentWebview().close();
		}
		
		function deletekeyword(keyword){
			plus.nativeUI.confirm("确认删除所选择的关键字-"+keyword+"？",function(e){
				console.log(e.index);
				if(e.Index == 1){
					plus.nativeUI.toast("你取消删除关键字！");
					return;
				}
				vue.keywords.forEach(function(item,index){
					console.log("index="+index + " item="+item);
					if(item == keyword)
						vue.keywords.splice(index,1);
				});
				app.setKeywords(vue.keywords);
				plus.nativeUI.toast("删除关键字成功！");
			});
		}
	</script>

</html>